<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/dialog/popbox.js" charset="utf-8"></script>
<div id="popupDemo">
	<div title='API' tabid='tab1'>
		<h2>$("#XX").ccayPopBox(conf);</h2>
		<h3>联想弹出框方法</h3><br />
				<form class="ccay-form">
				 <div class="ccay-form-content">
					<div class="ccay-form-body ccay-form-custom">
		    			<ul>
		    			 <li class="ccay-form-row">
							        <samp class="i18n" i18nKey="设置值的方式"></samp>
							        <span class='ccay-form-input'>$("#XX").manager().setValue("value","text")</span>
						</li>
		    			     <li class="ccay-form-row">
							        <samp class="i18n" i18nKey="conf.suggestOp"></samp>
							        <span class='ccay-form-input'>
										  <ul>
										      <li class="ccay-form-row">
											 	<samp class="i18n" i18nKey="基础属性设置"></samp>
											 	<span class='ccay-form-input'>说明</span>
											  </li>	
											  <li class="ccay-form-row">
											 	<samp class="i18n" i18nKey="url"></samp>
											 	<span class='ccay-form-input'>是数据服务的url， 如果后台请求的数据服务支持带参数，也可以写成 services/ccay/lookup/classify/list/{0} .这种方式。查询的时候，框架
	会自动将当前的联想值传如url中进行模糊匹配查询。（后台需要这中类型的服务接口，让其支持模糊查询）</span>
											  </li>	
											  <li class="ccay-form-row">
										        <samp>fieldMapper</samp>
												<span class="ccay-form-input">
													 显示在下拉列表的字段名称，与列头显示名
												</span>
											</li>
											<li class="ccay-form-row">
										        <samp>delay</samp>
												<span class="ccay-form-input">
													 延迟过滤的时间
												</span>
											</li>	
											<li class="ccay-form-row">
										        <samp>suggestLength</samp>
												<span class="ccay-form-input">
													输入字符的长度限制,进行联想
												</span>
											</li>	
											<li class="ccay-form-row">
										        <samp>suggestNum</samp>
												<span class="ccay-form-input">
													联想的数据数，在url中预留${suggestNum}可动态匹配
												</span>
											</li>
										     <li class="ccay-form-row">
											        <samp class="i18n" i18nKey="非基础属性设置"></samp>
											        <span class='ccay-form-input'>
非基础属性（ajax请求相关设置、自定义模板 & 样式设置、高级设置、事件设置）可参照<font style='cursor:pointer;text-decoration: underline' color="red" size="3" onclick='Ccay.Page.forward("ccay/example/ui/suggest/suggest.html")'>Suggest联想框</font>
											      </span>
										     </li>													 										 
										 </ul>
							      </span>
						     </li>
		    			     <li class="ccay-form-row">
							        <samp class="i18n" i18nKey="conf.popOp"></samp>
							        <span class='ccay-form-input'>
										  <ul>
										      <li class="ccay-form-row">
											 	<samp class="i18n" i18nKey="属性"></samp>
											 	<span class='ccay-form-input'>说明</span>
											  </li>	
											  <li class="ccay-form-row">
											 	<samp class="i18n" i18nKey="servicePath"></samp>
											 	<span class='ccay-form-input'>
											 	     <p>{String类型}<p>对应rest service的服务路径,根据该路径, 调用其通用查询服务 
											 	</span>
											 </li>
											 <li class="ccay-form-row">
											 	<samp class="i18n" i18nKey="autoLoad"></samp>
											 	<span class='ccay-form-input'>
											 	     <p>{Boolean}<p>是否加载后自动根据配置的参数加载查询弹出框的左边数据, 默认为true
											 	</span>
											 </li>
											  <li class="ccay-form-row">
							                    <samp class="i18n" i18nKey="columns"></samp>
							                    <span class="ccay-form-input">{Object[]类型}
							                         <p>显示列头定义,如:[{header:"第一列",name:"roleId",}{header:"第二列",name:"roleName",isCondition:true}]
							                         <p>isCondition:{Boolean}为true时，则该字段作为弹出框数据的搜索条件
							                         <p>header:列头显示，支持国际化，如：设置为header：$i18n("ccay.common.label.status")</span>
						                     </li>
						                     <li class="ccay-form-row">
							                     <samp class="i18n" i18nKey="uniqueKey"></samp>
							                     <span class="ccay-form-input">{String类型}<p>查询数据中的一个唯一键属性名，区分已选数据，多选的时候是必须的。<p></span>
						                     </li>
						                     
						                    <li class="ccay-form-row">
							                     <samp class="i18n" i18nKey="condRender"></samp>
							                 <span class="ccay-form-input">{function} 返回html字符串，会拼接到条件区</span>
						                    </li>
						                    <li class="ccay-form-row">
							                     <samp class="i18n" i18nKey="initRender"></samp>
							                 <span class="ccay-form-input">{function} 可对条件区的输入框操作，渲染下拉框等，可与condRender结合使用</span>
						                    </li>
						                                
											<li class="ccay-form-row">
											    <samp class="i18n" i18nKey="title"></samp>
											    <span class="ccay-form-input">{String类型}<p>必填 ：弹出框标题</span>
										    </li>
										    
											<li class="ccay-form-row">
											<samp class="i18n" i18nKey="width"></samp>
											<span class="ccay-form-input">{number类型}<p>可选 ：弹出框宽度 可不传</span>
											</li>
											
											<li class="ccay-form-row">
												<samp class="i18n" i18nKey="height"></samp>
												<span class="ccay-form-input">{number类型}<p>可选 ：弹出框高度 可不传</span>
											</li>											 										 
										 </ul>
							      </span>
						     </li>
		    			     <li class="ccay-form-row">
							        <samp class="i18n" i18nKey="公共属性"></samp>
							        <span class='ccay-form-input'>
										  <ul>
										      <li class="ccay-form-row">
											 	<samp class="i18n" i18nKey="属性"></samp>
											 	<span class='ccay-form-input'>说明</span>
											  </li>	
											  <li class="ccay-form-row">
											 	<samp>multi</samp>
											 	<span class='ccay-form-input'>
											 		{boolean类型} ：是否多选，默认为false
											 		
											 	</span>
											  </li>	
											  <li class="ccay-form-row">
										        <samp>queryParam</samp>
											 	<span class='ccay-form-input'>
											 	     <p>{Object类型}<p>默认的查询条件，可自己设置，<p>如 queryParam:{<p>roleName:$S("#defaultQueryParam")<p>};roleName为弹出框的vo的某个字段。<font color="red">该条件在弹出框中的搜索条件清除不了。</font>
											 	</span>
												</li>
												<li class="ccay-form-row">
										        <samp>valueField</samp>
												<span class="ccay-form-input">
													 实际值
												</span>
												</li>	
												<li class="ccay-form-row">
										        <samp>displayField </samp>
												<span class="ccay-form-input">
													 显示值
												</span>
												<li class="ccay-form-row">
										        <samp>callback </samp>
												<span class="ccay-form-input">
													 选择的回调方法function(value,text,data){}
												</span>
												</li>										 										 
										 </ul>
							      </span>
						     </li>
						     </ul>
						     </div>
					</div>
			</form>
	</div>
	
	<div title='单选' tabid='tab2'>
		<div >
			<form class="init ccay-form">
			<div class="ccay-form-input">
				<input type="text" id="suggest1"/>
				<input type="button" onclick="alert($('#suggest1').val())" value="getText"/>
				<input type="button" onclick="alert($('#suggest1').ccayGetValue())" value="getValue"/>
				<input type="button" onclick="$('#suggest1').manager().setValue('-1','张三')" value="设置一个值"/>
				<input type="button" onclick="alert($('#suggest1').manager().valid())" value="校验"/>
            	</div>
			</form>
			<h3>html 源码:</h3>
			<div class="codeArea">
				<pre id='html1'>
&lt;input type="text" id="suggest"/&gt;
&lt;input type="button" onclick="alert($('#suggest').val())" value="getText"/&gt;
&lt;input type="button" onclick="alert($('#suggest').ccayGetValue())" value="getValue"/&gt;
&lt;input type="button" onclick="$('#suggest').manager().setValue('-1','张三')" value="设置一个值"/&gt;
&lt;input type="button" onclick="alert($('#suggest').manager().valid())" value="校验"/&gt;
				</pre>
			</div>
			
			<h3>js 源码:</h3>
			<div class="codeArea">
				<pre id="js1">
var columns1 = [ {
	//id :"name",  //搜索条件生成INPUT的name属性值与后台VO属性对应
	//isCondition : true, //是否作为搜索条件
	header : $i18n("ccay.common.label.name"),
	field : 'name'
}, {
	header : "sAge",
	field : 'age',
	type: 'integer'
}, {
	//id :"sex", //搜索条件生成INPUT的name属性值与后台VO属性对应
	//isCondition, : true//是否作为搜索条件
	header : "sSex",
	field : 'sex',
	type: 'bool',
	format : {
		isIcon: true
	},
} ];
var conf1 = {
	suggestOp : {
		url : "services/ccay/demo/student/list/page/80/1",
		fieldMapper : {
			name : $i18n("ccay.common.label.name"),
			age : "年龄"
		}
	},
	popOp : {
		igrid : true,
		servicePath : "services/ccay/demo/student/list",
		historySupport : false,
		reSizable : true,
		uniqueKey : "id",
		columns : columns1,
		//条件搜索区域渲染
		condRender : function() {
			 
			return '&lt;ul>'+
					    '&lt;li class="ccay-form-row">'+
					        '&lt;samp class="i18n" i18nKey="ccay.common.label.name" >&lt;/samp>'+
					        '&lt;span class="ccay-form-input">&lt;input type="text" name="name" maxlength="20"/>&lt;/span>'+	
					    '&lt;/li>'+
					    '&lt;li class="ccay-form-row">'+
					        '&lt;samp class="i18n" i18nKey="Sex">&lt;/samp>'+
					        '&lt;span class="ccay-form-input">&lt;input type="text" class="init ccay-combobox" name="sex" service="ENUM:SexEnum" id="sex1"/>&lt;/span>'+
					    '&lt;/li>'+
				    '&lt;/ul>';
		},
		initRender : function(conditionDivSelector, popupObj, $S){
			conditionDivSelector.height("60px");
		},
		title :"标题"
	},
	displayField : "name",
	valueField : "id"
};
$("#suggest").ccayPopBox(conf1);/* 调用ccaySuggest,初始化联想框 */
				</pre>
			</div>
			
			<div class='try'>
				<a class="try" onclick="Ccay.example.openTry('#popupDemo',$('#js1').html(),$('#html1').html())">亲自试一试</a>
			</div> 
		</div>
	</div>	
	
	<div title='多选' tabid='tab3'>
		<div>
			<form class="init ccay-form">
			<div class="ccay-form-input">
				<input type="text" id="suggest2"/>
				<input type="button" onclick="alert($('#suggest2').val())" value="getText"/>
				<input type="button" onclick="alert($('#suggest2').ccayGetValue())" value="getValue"/>
				<input type="button" onclick="$('#suggest2').manager().setValue('-1,-2','张三;李四')" value="设置一个值"/>
				<input type="button" onclick="alert($('#suggest2').manager().valid())" value="校验"/>
			</div>
			</form>
			<h3>html 源码:</h3>
			<div class="codeArea">
				<pre id='html1'>
&lt;input type="text" id="suggest"/&gt;
&lt;input type="button" onclick="alert($('#suggest').val())" value="getText"/&gt;
&lt;input type="button" onclick="alert($('#suggest').ccayGetValue())" value="getValue"/&gt;
&lt;input type="button" onclick="$('#suggest').manager().setValue('-1,-2','张三;李四')" value="设置一个值"/&gt;
&lt;input type="button" onclick="alert($('#suggest').manager().valid())" value="校验"/&gt;
				</pre>
			</div>
			
			<h3>js 源码:</h3>
			<div class="codeArea">
				<pre id="js2">
var columns2 = [  {
	id :"name",  //搜索条件生成INPUT的name属性值与后台VO属性对应
	isCondition : true, //是否作为搜索条件
	header : $i18n("ccay.common.label.name"),
	field : 'name'
}, {
	header : "sAge",
	field : 'age',
	type: 'integer'
}, {
	header : "sSex",
	field : 'sex',
	type: 'bool',
	format : {
		isIcon: true
	},
} ];
var conf2 = {
		suggestOp : {
			url : "services/ccay/demo/student/list/page/80/1",
			fieldMapper : {
				name : $i18n("ccay.common.label.name"),
				age : "年龄"
			}
		},
		popOp : {
			servicePath : "services/ccay/demo/student/list",
			uniqueKey : "id",
			columns : columns2,
			title : $i18n("ccay.registry.label.popupTitle")
		},
		multi:true,
		displayField : "name",
		valueField : "id"
	};
$("#suggest").ccayPopBox(conf2);
				</pre>
			</div>
			
			<div class='try'>
				<a class="try" onclick="Ccay.example.openTry('#popupDemo',$('#js2').html(),$('#html1').html())">亲自试一试</a>
			</div> 
		</div>
	</div>	
	<div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:200px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
	<div title="FAQ">
  		可参照<font style='cursor:pointer;text-decoration: underline' color="red" size="3" onclick='Ccay.Page.forward("ccay/example/ui/suggest/suggest.html")'>Suggest联想框</font>
		和<font style='cursor:pointer;text-decoration: underline' color="red" size="3" onclick='Ccay.Page.forward("ccay/example/ui/dialog/popup.html")'>通用弹出框组件</font>
	  <form class="init ccay-form">
		<div class="ccay-form-body ccay-form-custom">
			<ul>						
			    <li class="ccay-form-row">
			        <samp><h3>问题</h3></samp>
					<span class="ccay-form-input">
						<h3>解决方案</h3>
					</span>
				</li>
			</ul>
		</div>
	  </form>						
    </div>
</div>